<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>我的订单</title>
    <link type="text/css" rel="stylesheet" href="dist/css/bootstrap.min.css" th:href="@{/dist/css/bootstrap.min.css}">
    <link rel="stylesheet" type="text/css" href="css/index.css" th:href="@{/css/index.css}"/>
    <link rel="stylesheet" type="text/css" href="css/animate.css" th:href="@{/css/animate.css}"/>
    <link rel="stylesheet" type="text/css" href="css/bootstrap-datetimepicker.min.css"
          th:href="@{/css/bootstrap-datetimepicker.min.css}"/>
    <link rel="stylesheet" type="text/css" href="css/order_list.css" th:href="@{/css/order_list.css}"/>
</head>

<body>
<!--导航部分  begin-->
<div th:replace="common/header :: header"></div>
<!--导航部分 end-->

<!--最顶端轮播图片 begin-->
<div th:replace="common/carousel :: carousel"></div>
<!--最顶端轮播图片 end-->

<!--订单begin-->
<!--外层div-->
<div class="container">
    <!--左边-->
    <div class="container pull-left">
        <ol class="breadcrumb">
            <li>
                <a href="#" class="text-success"><span class="glyphicon glyphicon-list"></span>&nbsp;&nbsp;我的订单</a>
            </li>
        </ol>

        <!--订单查询导航 begin-->
        <div>
            <nav class="navbar navbar-default" role="navigation">
                <div class="navbar-header">
                    <a class="navbar-brand" href="#">所有订单</a>
                </div>

                <form class="navbar-form navbar-left" role="search">
                    <input type="text" class="form-control" placeholder="输入订单号进行查询">
                    <button type="button" class="btn btn-search">
                        <span class="text-success">Search</span>&nbsp;&nbsp;<span
                            class="glyphicon glyphicon-search"></span>
                    </button>
                </form>

                <ul class="nav navbar-nav navbar-left">
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                            交易状态
                            <b class="caret"></b>
                        </a>
                        <ul class="dropdown-menu">
                            <li>
                                <a href="#">全部</a>
                            </li>
                            <li class="divider"></li>
                            <li>
                                <a href="#">已付款</a>
                            </li>
                            <li class="divider"></li>
                            <li>
                                <a href="#">未付款</a>
                            </li>
                            <li class="divider"></li>
                            <li>
                                <a href="#">交易成功</a>
                            </li>
                            <li class="divider"></li>
                        </ul>
                    </li>
                </ul>
                <ul class="nav navbar-nav navbar-left">
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                            订单排序
                            <b class="caret"></b>
                        </a>
                        <ul class="dropdown-menu">
                            <li>
                                <a href="#">订单日期降序</a>
                            </li>
                            <li class="divider"></li>
                            <li>
                                <a href="#">订单日期升序</a>
                            </li>
                            <li class="divider"></li>
                        </ul>
                    </li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li style="padding-right: 15px;">
                        <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">更多筛选条件</a>
                    </li>
                </ul>

                <ul class="nav navbar-nav">
                    <li>
                        <a href="#">删除订单</a>
                    </li>
                </ul>
                <ul class="nav navbar-nav">
                    <li>
                        <a href="#">清空订单列表</a>
                    </li>
                </ul>
            </nav>
        </div>

        <!--订单查询导航 end-->
        <!--日期控件-->
        <div id="collapseTwo" class="panel-collapse collapse">
            <div class="panel-body">
                <div class="form-group">
                    <div>
                        <form class="form-horizontal">
                            <div class="form-group has-feedback">
                                <div class="col-md-1" style="padding-top:5px ;">
                                    成交日期:
                                </div>
                                <div class="col-md-3">
                                    <input type="text" class="form-control" id="datetimepicker" placeholder="开始时间">
                                    <span class="glyphicon glyphicon-time form-control-feedback"></span>
                                </div>
                                <div class="col-md-1" style="padding-top:5px ;text-align:center;">
                                    至
                                </div>
                                <div class="col-md-3">
                                    <input type="text" class="form-control" id="datetimepicker2" placeholder="结束日期">
                                    <span class="glyphicon glyphicon-time form-control-feedback"></span>
                                </div>
                                <div class="col-md-3">
                                    <button type="button" class="btn btn-default">查询&nbsp;&nbsp;<span
                                            class="glyphicon glyphicon-search"></span></button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <!--日期控件-->

        <!--内容展示 begin-->
        <div class="table-responsive">
            <table class="table table-hover table-striped" th:each="order,iter:${orders}">
                <caption class="text-info">
                    <div class="col-md-10" style="padding-left: 0px;">
                        <input type="checkbox" name="cks">&nbsp;<span
                            th:text="${#calendars.format(order.createDate, 'yyyy-MM-dd')}">2017-01-09</span> 订单号:<span
                            th:text="${order.orderNum}">1527600039447022</span>
                    </div>
                    <div class="col-md-2" style="text-align: right;">
                        <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree"
                           th:href="@{'#collapseDetail' + ${iter.index}}">订单详情</a>
                    </div>
                </caption>
                <thead>
                <tr id="collapseThree" th:id="${'collapseDetail' + iter.index}" class="panel-collapse collapse">
                    <td colspan="9">
                        <div class="panel-body">
                            <!--tab选项卡 begin-->
                            <ul id="myTab" class="nav nav-tabs">
                                <li class="active">
                                    <a href="#home" th:href="@{'#home'+ ${iter.index}}" data-toggle="tab">
                                        联系人信息
                                    </a>
                                </li>
                                <li>
                                    <a href="#ios" th:href="@{'#ios'+ ${iter.index}}" data-toggle="tab">订单信息</a>
                                </li>
                                <!--                                物流信息-->
                                <!--                                TODO 物流信息-->
                                <li th:if="${order.orderStatus}==1">
                                    <a href="#wuliu" th:href="@{'#wuliu'+ ${iter.index}}" data-toggle="tab">物流信息</a>
                                </li>
                            </ul>
                            <div id="myTabContent" class="tab-content">
                                <div class="tab-pane fade in active" id="home" th:id="${'home' + iter.index}">
                                    <div class="row">
                                        <div>
                                            <ul class="nav navbar-collapse" style="line-height: 3;">
                                                <li class="text-info"><span class="text-success">姓名:</span><span
                                                        class="text-info" th:text="${order.user.username}">管成功</span>
                                                </li>
                                                <li class="text-info"><span class="text-success">联系方式:</span> <span
                                                        th:text="${order.user.phone}">15906128572</span></li>
                                                <li class="text-info"><span class="text-success">收货地址:</span> <span
                                                        th:text="${order.address.province} + ${order.address.city} + ${order.address.area} + ${order.address.detailAddress}">江苏省苏州市姑苏区烽火路80号天创企业3楼</span>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                    </p>
                                </div>
                                <div class="tab-pane fade" id="ios" th:id="${'ios' + iter.index}">
                                    <div class="row">
                                        <div>
                                            <ul class="nav navbar-collapse" style="line-height: 3;">
                                                <li class="text-info"><span class="text-success">订单编号:</span><span
                                                        class="text-info"
                                                        th:text="${order.orderNum}">1527600039447022</span></li>
                                                <li class="text-info"><span class="text-success">交易时间:</span><span
                                                        th:text="${#calendars.format(order.createDate, 'yyyy-MM-dd HH:mm:ss')}">01/04/2017 12:52 PM</span>
                                                </li>
                                                <li class="text-info"><span class="text-success">订单总金额:</span><span
                                                        th:text="${session.userCartInfo.totalPrice} + '元'">520.0元</span>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <div class="tab-pane fade" id="wuliu" th:id="${'wuliu' + iter.index}">
                                    <div class="row">
                                        <div>
                                            <ul class="nav navbar-collapse" style="line-height: 3;">
                                                <li class="text-info"><span class="text-success">发货地:</span><span
                                                        class="text-info"
                                                >湖南长沙</span></li>
                                                <li class="text-info"><span class="text-success">发货时间:</span><span
                                                        th:text="${#calendars.format(order.createDate, 'yyyy-MM-dd HH:mm:ss')}">01/04/2017 12:52 PM</span>
                                                </li>
                                                <li class="text-info"><span class="text-success">预计到达时间:</span>

                                                    <span class="time"
                                                          th:text="${#calendars.format(order.createDate, 'yyyy-MM-dd')}">520.0元</span>
                                                    <!--                                                        th:text="${#calendars.format(order.createDate, 'yyyy-MM-dd')}">520.0元</span>-->

                                                    <script>
                                                        var time = document.querySelector('.time').innerHTML;
                                                        let dateTime = new Date(time)

                                                        dateTime = dateTime.setDate(dateTime.getDate() +3);

                                                        dateTime = new Date(dateTime);

                                                        var year = dateTime.getFullYear();
                                                        var month = dateTime.getMonth() + 1;
                                                        var day = dateTime.getDate();
                                                        var newTime = year + '-' +
                                                            month + '-' +
                                                            day + ' '
                                                        document.querySelector('.time').innerHTML = newTime

                                                    </script>
                                                </li>


                                            </ul>
                                        </div>
                                    </div>
                                </div>

                            </div>
                            <!--tab选项卡 end-->
                        </div>
                    </td>
                </tr>

                <tr class="active">
                    <th>序号</th>
                    <th>图片</th>
                    <th>图片名称</th>
                    <th>单价(元)</th>
                    <th>数量</th>
                    <th>实付款(元)</th>
                    <th>付款日期</th>
                    <th>交易状态</th>
                </tr>
                </thead>
                <tbody>
                <tr class="warning" th:each="items:${order.orderItems}">
                    <td th:text="${items.book.id}">1001</td>
                    <td><img src="images/yuannideqingchunbufumengxiang.jpg"
                             th:src="@{'/images/' + ${items.book.imgUrl}}"></td>
                    <td th:text="${items.book.name}">愿你的青春不负梦想</td>
                    <td th:text="${items.book.newPrice}">80.0</td>
                    <td th:text="${items.count}">2</td>
                    <td th:text="${items.count * items.book.newPrice}">160.0</td>
                    <td th:text="${#calendars.format(order.createDate, 'dd/MM/yyyy')}">01/08/2017</td>
                    <!--                 TODO    <td th:text="${order.orderStatus}">未付款</td>-->
                    <td th:if="${order.orderStatus}==0">未付款</td>
                    <td th:if="${order.orderStatus}==1">已付款</td>
                    <!--                    <td th:text="${order.orderStatus}">未付款</td>-->
                </tr>
                </tbody>
            </table>
        </div>
        <!--内容展示end-->
    </div>
    <!--分页begin-->
    <div class="container">
        <div class="row text-center">
            <div class="col-md-12">
                <ul class="pagination">
                    <li><a href="#">首页</a></li>
                    <li class="disabled"><a href="#">&laquo;</a></li>
                    <li><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li class="active"><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                    <li><a href="#">5</a></li>
                    <li><a href="#">&raquo;</a></li>
                    <li><a href="#" style="border: 1px solid #ddd;">尾页</a></li>
                    <li><a style="border: 0px;margin-left: 0px;">当前页3/5总页</a></li>
                    <li>

                        <div id="search" class="input-group" style="positon:relative;">
                            <input type="text" class="form-control" placeholder="跳转指定页"/>
                            <span class="input-group-btn">
							            <button class="btn btn-info btn-search">GO</button>
									</span>
                        </div>
                    </li>
                    <li><a style="padding-top: 0px;border: 0px;">
                        <label>每页显示:</label>
                        <select id="pageSize" class="form-control" style="width: 100px;display: inline;">
                            <option value="2">2</option>
                            <option value="2">4</option>
                            <option value="2">6</option>
                            <option value="2">8</option>
                        </select>
                        <label>条</label>
                    </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!--分页end-->
</div>


<div class="container">
    <hr>
    <!--首页底部信息 begin-->
    <div th:replace="common/footer :: footer"></div>
    <!--首页底部信息end-->
</div>
<!--end-->
<script src="dist/js/jquery.min.js" th:src="@{/dist/js/jquery.min.js}"></script>
<script src="dist/js/bootstrap.min.js" th:src="@{/dist/js/bootstrap.min.js}"></script>
<script src="js/moment.js" th:src="@{/js/moment.js}" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap-datetimepicker.js" th:src="@{/js/bootstrap-datetimepicker.js}" type="text/javascript"
        charset="utf-8"></script>
<script type="text/javascript">
    $('#datetimepicker').datetimepicker();
    $('#datetimepicker2').datetimepicker();


</script>


</body>
</html>
